TypeScript'i täpsed tüübid: Range objektikuju sobitamine robustse koodi jaoks

TypeScript, JavaScripti superhulk, toob staatilise tüüpimise dünaamilisse veebiarenduse maailma. Kuigi TypeScript pakub märkimisväärseid eeliseid tüübiohutuse ja koodi hooldatavuse osas, võib selle struktuurne tüüpimissüsteem mõnikord põhjustada ootamatut käitumist. Siin tulebki mängu "täpsete tüüpide" kontseptsioon. Kuigi TypeScriptil ei ole sisseehitatud funktsiooni, mida nimetataks selgesõnaliselt "täpseteks tüüpideks", saame sarnase käitumise saavutada TypeScripti funktsioonide ja tehnikate kombinatsiooni abil. See blogipostitus süveneb sellesse, kuidas TypeScriptis rangemat objektikuju sobitamist jõustada, et parandada koodi robustsust ja vältida levinud vigu.

TypeScript'i struktuurse tüüpimise mõistmine

TypeScript kasutab struktuurset tüüpimist (tuntud ka kui "duck typing"), mis tähendab, et tüüpide ühilduvus määratakse tüüpide liikmete, mitte nende deklareeritud nimede põhjal. Kui objektil on kõik tüübi poolt nõutavad omadused, peetakse seda selle tüübiga ühilduvaks, olenemata sellest, kas sellel on täiendavaid omadusi.

Näiteks:

interface Point {
  x: number;
  y: number;
}

const myPoint = { x: 10, y: 20, z: 30 };

function printPoint(point: Point) {
  console.log(`X: ${point.x}, Y: ${point.y}`);
}

printPoint(myPoint); // See töötab hästi, kuigi myPoint objektil on 'z' omadus

Selles stsenaariumis lubab TypeScript `myPoint` objekti edastada funktsioonile `printPoint`, sest see sisaldab nõutud `x` ja `y` omadusi, kuigi sellel on ka lisaomadus `z`. Kuigi see paindlikkus võib olla mugav, võib see põhjustada ka peeneid vigu, kui edastate kogemata ootamatute omadustega objekte.

Liigsete omaduste probleem

Struktuurse tüüpimise leebus võib mõnikord vigu varjata. Kujutage ette funktsiooni, mis ootab konfiguratsiooniobjekti:

interface Config {
  apiUrl: string;
  timeout: number;
}

function setup(config: Config) {
  console.log(`API URL: ${config.apiUrl}`);
  console.log(`Timeout: ${config.timeout}`);
}

const myConfig = { apiUrl: "https://api.example.com", timeout: 5000, typo: true };

setup(myConfig); // TypeScript siin ei kurda!

console.log(myConfig.typo); //prindib true. Lisaomadus eksisteerib vaikselt

Selles näites on `myConfig` objektil lisaomadus `typo`. TypeScript ei anna viga, sest `myConfig` vastab endiselt `Config` liidesele. Kuid trükiviga ei tabata kunagi ja rakendus ei pruugi käituda ootuspäraselt, kui trükiviga pidi olema `typoo`. Need näiliselt tähtsusetud probleemid võivad keeruliste rakenduste silumisel kasvada suurteks peavaludeks. Puuduv või valesti kirjutatud omadus võib olla eriti raskesti tuvastatav, kui tegemist on objektide sisse pesastatud objektidega.

Lähenemisviisid täpsete tüüpide jõustamiseks TypeScriptis

Kuigi tõelised "täpsed tüübid" pole TypeScriptis otse saadaval, on siin mitu tehnikat sarnaste tulemuste saavutamiseks ja rangema objektikuju sobitamise jõustamiseks:

1. Tüübikinnitus `Omit` abil

Utiliittüüp `Omit` võimaldab teil luua uue tüübi, välistades olemasolevast tüübist teatud omadused. Kombineerituna tüübikinnitusega aitab see vältida liigseid omadusi.

interface Point {
  x: number;
  y: number;
}

const myPoint = { x: 10, y: 20, z: 30 };

// Loo tüüp, mis sisaldab ainult Point'i omadusi
const exactPoint: Point = myPoint as Omit & Point;

// Error: Type '{ x: number; y: number; z: number; }' is not assignable to type 'Point'.
// Object literal may only specify known properties, and 'z' does not exist in type 'Point'.

function printPoint(point: Point) {
  console.log(`X: ${point.x}, Y: ${point.y}`);
}


//Parandus
const myPointCorrect = { x: 10, y: 20 };
const exactPointCorrect: Point = myPointCorrect as Omit & Point;
printPoint(exactPointCorrect);

See lähenemine annab vea, kui `myPoint` objektil on omadusi, mis pole `Point` liideses määratletud.

Selgitus: `Omit` loob tüübi, mis jätab `myPoint` tüübist välja kõik `Point`'is olevad võtmed. Seejärel lõikab `& Point` selle tüübi `Point` tüübiga, nõudes sisuliselt, et objekt vastaks `Point` tüübile. Kinnitades objekti sellele kombineeritud tüübile, kontrollib kompilaator lisaomadusi ja annab vea, kui neid leitakse. See sunnib meid deklareerima õige kuju objekti esmasel defineerimisel.

2. Objektide loomiseks funktsiooni kasutamine

Saate luua tehasefunktsiooni, mis aktsepteerib ainult liideses määratletud omadusi. See lähenemine tagab tugeva tüübikontrolli objekti loomise hetkel.

interface Config {
  apiUrl: string;
  timeout: number;
}

function createConfig(config: Config): Config {
  return {
    apiUrl: config.apiUrl,
    timeout: config.timeout,
  };
}

const myConfig = createConfig({ apiUrl: "https://api.example.com", timeout: 5000 });

//See ei kompileeru:
//const myConfigError = createConfig({ apiUrl: "https://api.example.com", timeout: 5000, typo: true });
//Argument of type '{ apiUrl: string; timeout: number; typo: true; }' is not assignable to parameter of type 'Config'.
// Object literal may only specify known properties, and 'typo' does not exist in type 'Config'.

Tagastades objekti, mis on konstrueeritud ainult `Config` liideses määratletud omadustega, tagate, et lisaomadusi ei saa sisse hiilida. See muudab konfiguratsiooni loomise ohutumaks.

3. Tüübivalvurite (Type Guards) kasutamine

Tüübivalvurid on funktsioonid, mis kitsendavad muutuja tüüpi teatud skoobis. Kuigi nad ei takista otseselt liigsete omaduste tekkimist, aitavad nad neid selgesõnaliselt kontrollida ja vastavalt tegutseda.

interface User {
  id: number;
  name: string;
}

function isUser(obj: any): obj is User {
  return (
    typeof obj === 'object' &&
    obj !== null &&
    'id' in obj && typeof obj.id === 'number' &&
    'name' in obj && typeof obj.name === 'string' &&
    Object.keys(obj).length === 2 //kontrolli võtmete arvu. Märkus: habras ja sõltub User'i täpsest võtmete arvust.
  );
}

const potentialUser1 = { id: 123, name: "Alice" };
const potentialUser2 = { id: 456, name: "Bob", extra: true };

if (isUser(potentialUser1)) {
  console.log("Valid User:", potentialUser1.name);
} else {
  console.log("Invalid User");
}

if (isUser(potentialUser2)) {
  console.log("Valid User:", potentialUser2.name); // Seda koodi ei käivitata
} else {
  console.log("Invalid User");
}

Selles näites kontrollib `isUser` tüübivalvur mitte ainult nõutavate omaduste olemasolu, vaid ka nende tüüpe ja omaduste *täpset* arvu. See lähenemine on selgesõnalisem ja võimaldab teil vigaseid objekte sujuvalt käsitleda. Siiski on omaduste arvu kontroll habras. Iga kord, kui `User` saab/kaotab omadusi, tuleb kontrolli uuendada.

4. `Readonly` ja `as const` võimendamine

Kuigi `Readonly` takistab olemasolevate omaduste muutmist ja `as const` loob kirjutuskaitstud enniku või objekti, kus kõik omadused on sügavalt kirjutuskaitstud ja neil on literaaltüübid, saab neid kasutada rangema definitsiooni ja tüübikontrolli loomiseks koos teiste meetoditega. Kuigi kumbki ei takista iseseisvalt liigseid omadusi.

interface Options {
  width: number;
  height: number;
}

//Loo Readonly tüüp
type ReadonlyOptions = Readonly;

const options: ReadonlyOptions = { width: 100, height: 200 };

//options.width = 300; //error: Cannot assign to 'width' because it is a read-only property.

//Kasutades as const
const config = { api_url: "https://example.com", timeout: 3000 } as const;

//config.timeout = 5000; //error: Cannot assign to 'timeout' because it is a read-only property.

//Siiski on liigsed omadused endiselt lubatud:
const invalidOptions: ReadonlyOptions = { width: 100, height: 200, depth: 300 }; //viga ei teki. Lubab endiselt liigseid omadusi.


interface StrictOptions {
  readonly width: number;
  readonly height: number;
}

//See annab nüüd vea:
//const invalidStrictOptions: StrictOptions = { width: 100, height: 200, depth: 300 };
//Type '{ width: number; height: number; depth: number; }' is not assignable to type 'StrictOptions'.
//  Object literal may only specify known properties, and 'depth' does not exist in type 'StrictOptions'.

See parandab muutumatust, kuid takistab ainult muteerimist, mitte lisaomaduste olemasolu. Kombineerituna `Omit`'iga või funktsioonipõhise lähenemisega muutub see tõhusamaks.

5. Teekide (nt Zod, io-ts) kasutamine

Teegid nagu Zod ja io-ts pakuvad võimsaid käitusajalisi tüübivalideerimis- ja skeemide defineerimise võimalusi. Need teegid võimaldavad teil määratleda skeeme, mis kirjeldavad täpselt teie andmete oodatavat kuju, sealhulgas vältides liigseid omadusi. Kuigi need lisavad käitusajalise sõltuvuse, pakuvad nad väga robustset ja paindlikku lahendust.

Näide Zodiga:

import { z } from 'zod';

const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
});

type User = z.infer;

const validUser = { id: 1, name: "John" };
const invalidUser = { id: 2, name: "Jane", extra: true };

const parsedValidUser = UserSchema.parse(validUser);
console.log("Parsed Valid User:", parsedValidUser);

try {
  const parsedInvalidUser = UserSchema.parse(invalidUser);
  console.log("Parsed Invalid User:", parsedInvalidUser); // Seda ei saavutata
} catch (error) {
  console.error("Validation Error:", error.errors);
}

Zodi `parse` meetod annab vea, kui sisend ei vasta skeemile, vältides tõhusalt liigseid omadusi. See pakub käitusajalist valideerimist ja genereerib ka TypeScripti tüübid skeemist, tagades järjepidevuse teie tüübimääratluste ja käitusajalise valideerimisloogika vahel.

Parimad tavad täpsete tüüpide jõustamiseks

Siin on mõned parimad tavad, mida arvesse võtta TypeScriptis rangema objektikuju sobitamise jõustamisel:

• Valige õige tehnika: Parim lähenemine sõltub teie konkreetsetest vajadustest ja projekti nõuetest. Lihtsate juhtumite puhul võivad piisata tüübikinnitused `Omit`'iga või tehasefunktsioonid. Keerukamate stsenaariumide või käitusajalise valideerimise vajaduse korral kaaluge teekide, nagu Zod või io-ts, kasutamist.
• Olge järjepidev: Rakendage valitud lähenemist kogu oma koodibaasis järjepidevalt, et säilitada ühtlane tüübiohutuse tase.
• Dokumenteerige oma tüübid: Dokumenteerige selgelt oma liidesed ja tüübid, et teistele arendajatele edastada oma andmete oodatav kuju.
• Testige oma koodi: Kirjutage ühikteste, et kontrollida, kas teie tüübipiirangud töötavad ootuspäraselt ja kas teie kood käsitleb vigaseid andmeid sujuvalt.
• Kaaluge kompromisse: Rangema objektikuju sobitamise jõustamine võib muuta teie koodi robustsemaks, kuid see võib ka arendusaega pikendada. Kaaluge kasu ja kulusid ning valige lähenemine, mis on teie projekti jaoks kõige mõistlikum.
• Järk-järguline kasutuselevõtt: Kui töötate suure olemasoleva koodibaasiga, kaaluge nende tehnikate järk-järgulist kasutuselevõttu, alustades oma rakenduse kõige kriitilisematest osadest.
• Eelistage liideseid tüübialiastele objektikujude defineerimisel: Liidesed on üldiselt eelistatud, kuna nad toetavad deklaratsioonide liitmist, mis võib olla kasulik tüüpide laiendamisel erinevates failides.

Reaalse maailma näited

Vaatame mõningaid reaalseid stsenaariume, kus täpsed tüübid võivad olla kasulikud:

• API päringu koormad (payloads): Andmete saatmisel API-le on ülioluline tagada, et koorem vastaks oodatud skeemile. Täpsete tüüpide jõustamine aitab vältida ootamatute omaduste saatmisest tingitud vigu. Näiteks on paljud maksetöötluse API-d äärmiselt tundlikud ootamatute andmete suhtes.
• Konfiguratsioonifailid: Konfiguratsioonifailid sisaldavad sageli suurt hulka omadusi ja trükivead võivad olla tavalised. Täpsete tüüpide kasutamine aitab neid trükivigu varakult tabada. Kui seadistate pilvelahenduses serveri asukohti, muutub asukohaseade trükiviga (nt eu-west-1 vs. eu-wet-1) äärmiselt raskesti silutavaks, kui seda kohe ei tabata.
• Andmete teisendamise torujuhtmed: Andmete teisendamisel ühest formaadist teise on oluline tagada, et väljundandmed vastaksid oodatud skeemile.
• Sõnumijärjekorrad: Sõnumite saatmisel läbi sõnumijärjekorra on oluline tagada, et sõnumi koorem oleks kehtiv ja sisaldaks õigeid omadusi.

Näide: Rahvusvahelistamise (i18n) konfiguratsioon

Kujutage ette tõlgete haldamist mitmekeelses rakenduses. Teil võib olla selline konfiguratsiooniobjekt:

interface Translation {
  greeting: string;
  farewell: string;
}

interface I18nConfig {
  locale: string;
  translations: Translation;
}

const englishConfig: I18nConfig = {
  locale: "en-US",
  translations: {
    greeting: "Hello",
    farewell: "Goodbye"
  }
};


//See tekitab probleemi, kuna liigne omadus eksisteerib, tuues vaikselt sisse vea.
const spanishConfig: I18nConfig = {
  locale: "es-ES",
  translations: {
    greeting: "Hola",
    farewell: "Adiós",
    typo: "unintentional translation"
  }
};

//Lahendus: Kasutades Omit'i
const spanishConfigCorrect: I18nConfig = {
  locale: "es-ES",
  translations: {
    greeting: "Hola",
    farewell: "Adiós"
  } as Omit & Translation
};

Ilma täpsete tüüpideta võib tõlkevõtme trükiviga (nagu `typo` välja lisamine) jääda märkamatuks, mis toob kaasa puuduvad tõlked kasutajaliideses. Rangema objektikuju sobitamise jõustamisega saate need vead arenduse käigus tabada ja vältida nende jõudmist tootmisse.

Kokkuvõte

Kuigi TypeScriptil pole sisseehitatud "täpseid tüüpe", saate sarnaseid tulemusi saavutada TypeScripti funktsioonide ja tehnikate kombinatsiooni abil, nagu tüübikinnitused `Omit`'iga, tehasefunktsioonid, tüübivalvurid, `Readonly`, `as const` ning välised teegid nagu Zod ja io-ts. Rangema objektikuju sobitamise jõustamisega saate parandada oma koodi robustsust, vältida levinud vigu ja muuta oma rakendused usaldusväärsemaks. Ärge unustage valida lähenemist, mis sobib teie vajadustega kõige paremini, ja olla selle rakendamisel kogu oma koodibaasis järjepidev. Neid lähenemisviise hoolikalt kaaludes saate oma rakenduse tüüpide üle suurema kontrolli saavutada ja suurendada pikaajalist hooldatavust.